<template>
	<view class="apply-cash">
		<form @submit="formSubmit" @reset="formReset">
			<template v-if="words">
				<view class="top_bg" :style="'height:' + (328 + topBarHeight() * 2 + topBarTop() * 2) + 'rpx;'">
					<!-- #ifdef MP-WEIXIN || APP-PLUS -->
					<view class="ww100" :style="'height:' + topBarTop() + 'px;'"></view>
					<view class="tc  head_top" :style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;'">
						<view class="reg180" @click="navBack"><text class="icon iconfont icon-jiantou"></text></view>
						<view class="fb">提现</view>
					</view>
					<!-- #endif -->
					<view class="card-top d-c-c d-c">
						<view class="top-money f68 fb">
							{{agent&&agent.money||'0.00'}}
						</view>
						<view class="f24">{{ words.cashApply.capital }}</view>
					</view>
				</view>
				<view class="card-form">
					<view class="cart-nav" :class="`navType${payType.length}`" v-if="payType.length > 1">
						<view @click="typeFunc(item)" class="cart-nav-item" :class="{active:withdraw_type == item}"
							v-for="(item,index) in payType" :key="index">
							<view class="navactive-bg">
								<image class="navactive-bg-left" v-if="index!=0" src="/static/agent/cashnav-l.png"
									mode="">
								</image>
								<image class="navactive-bg-right" v-if="index!=(payType.length-1)"
									src="/static/agent/cashnav-r.png" mode=""></image>
							</view>
							<template v-if="item == 10">
								<view class="name">微信</view>
							</template>
							<template v-if="item == 20">
								<view class="name">支付宝</view>
							</template>
							<template v-if="item == 30">
								<view class="name">银行卡</view>
							</template>
							<template v-if="item == 40">
								<view class="name">余额</view>
							</template>
						</view>
					</view>
					<view class="cash-wrap cash-bottom">
						<view class="d-b-c border-b">
							<view class="cash-label">提现金额</view>
							<input class="cash-form-item " name="money" v-model="money" type="text"
								placeholder-class="grary"
								:placeholder="`${words.cashApply.minMoney}￥${settlement.minMoney}`" />
							<text @click="getAll" style="color: #5A3713;">全部提现</text>
						</view>

						<template v-if="withdraw_type == 10">
							<view class="d-b-c border-b">
								<view class="cash-label">账号</view>
								<input :disabled="hasRealName" class="cash-form-item " name="realName"
									v-model="realName" type="text" placeholder-class="grary" placeholder="请输入您的微信姓名" />
							</view>
							<view v-if="!hasRealName" class="d-s-c form-bottom-words pt16">
								<text class="icon iconfont icon-gantanhao mr10"
									style="font-size: 28rpx; color: #5A3713;"></text>
								请输入收款人真实姓名进行提现操作！
							</view>
						</template>
						<template v-if="withdraw_type == 20">
							<view class="d-b-c border-b">
								<view class="cash-label">支付宝姓名</view>
								<input class="cash-form-item " name="alipayName" v-model="form.alipayName" type="text"
									placeholder-class="grary" placeholder="请输入支付宝姓名" />
							</view>
							<view class="d-b-c border-b">
								<view class="cash-label">支付宝账号</view>
								<input class="cash-form-item " name="alipayAccount" v-model="form.alipayAccount"
									type="text" placeholder-class="grary" placeholder="请输入支付宝账号" />
							</view>
						</template>
						<template v-if="withdraw_type == 30">
							<view class="d-b-c border-b">
								<view class="cash-label">开户名</view>
								<input class="cash-form-item " name="bankAccount" v-model="form.bankAccount" type="text"
									placeholder-class="grary" placeholder="请输入开户名" />
							</view>
							<view class="d-b-c border-b">
								<view class="cash-label">银行卡号</view>
								<input class="cash-form-item " name="bankCard" v-model="form.bankCard" type="text"
									placeholder-class="grary" placeholder="请输入银行卡号" />
							</view>
							<view class="d-b-c border-b">
								<view class="cash-label">开户行名称</view>
								<input class="cash-form-item " name="bankName" v-model="form.bankName" type="text"
									placeholder-class="grary" placeholder="请输入开户行名称" />
							</view>
						</template>
						<view class="form-bottom-words">{{ words.cashApply.currentMoney }}<text class="f28"
								style="color: #5A3713;">{{agent&&agent.money||'0.00'}}</text>,{{ words.cashApply.settledMoney }}<text
								class="f28" style="color: #5A3713;">{{agent&&agent.settledMoney||'0.00'}}</text></view>
						<view class="form-bottom-words">
							提现手续费<text class="f28" style="color: #5A3713;">{{settlement.cashRatio}}%</text>,实际到账<text
								style="color: #5A3713;">￥{{realMoney}}</text>
						</view>
						<view class="form-bottom-words">{{ words.cashApply.explain }}</view>
					</view>
				</view>
				<view class="d-c-c mt26">
					<!-- #ifdef H5 -->
					<template v-if="isWeixin() && mpState == 1 && temlIds.length > 0 ">
						<wx-open-subscribe :template="temlIds" id="subscribe-btn" @success="subscribeSuccess"
							@error="subscribeFail">
							<div v-is="'script'" type="text/wxtag-template" slot="style">
								<div v-is="'style'">
									#subscribe-btn{
									width: 100%;
									}
									.subscribe-btn{
									border-radius:200px;
									color: #5A3713;
									background: linear-gradient(0deg, #FFDCA2 0%, #FDC57A 100%);
									box-sizing: border-box;
									text-align: center;
									padding:0
									}
								</div>
							</div>
							<div v-is="'script'" type="text/wxtag-template">
								<div class="subscribe-btn" :style="{
												height: btnAtrrpx.height+'px',
												lineHeight: btnAtrrpx.height+'px',
												paddingLeft: btnAtrrpx.paddingLeft+'px',
												paddingRigth: btnAtrrpx.paddingLeft+'px',
												fontSize: btnAtrrpx.fontSize+'px',
											}">
									{{ words.cashApply.submit }}
								</div>
							</div>
						</wx-open-subscribe>
					</template>
					<button v-else class="btn-sub " @click="formSubmit">{{ words.cashApply.submit }}</button>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<button class="btn-sub" @click="formSubmit">{{ words.cashApply.submit }}</button>
					<!-- #endif -->
				</view>
			</template>

		</form>
	</view>
</template>

<script>
	import Popup from '@/components/uni-popup.vue';
	export default {
		components: {
			Popup
		},
		data() {
			return {
				loadding: true,
				/*是否加载完成*/
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				/*支付类别*/
				withdraw_type: 10,
				isData: false,
				agent: {},
				payType: [],
				words: null,
				form: {},
				/*小程序订阅消息*/
				temlIds: [],
				money: '',
				realName: '',
				hasRealName: false,
				settlement: {},
				urldata: "",
				btnAtrrpx: {},
				// 1 公众号登录
				mpState: null,
				pop_type: 10,
				realMoney: 0,
			}
		},
		computed: {


		},
		watch: {
			money: function(n, o) {
				let self = this;
				if (n != o) {
					self.realMoney = self.overprice();
				}
			}
		},
		mounted() {
			let mpState = uni.getStorageSync('mpState');
			this.mpState = mpState;
			/*获取数据*/
			this.getData();
			// #ifdef H5
			if (this.isWeixin()) {
				this.urldata = window.location.href;
				this.getBtnInfo();
				this.getTemplateId();
			}
			// #endif
		},
		methods: {
			overprice() {
				let money = (this.money * this.settlement.cashRatio) / 100;
				money = this.money - money.toFixed(2);
				console.log(money);
				return money.toFixed(2);
			},
			typeFunc(n) {
				console.log(n, 'n')
				this.withdraw_type = n;
			},
			selectType() {
				this.withdraw_type = this.pop_type;
				this.isType = false;
			},
			subscribeSuccess() {
				this.formSubmit();
				console.log("调用成功")
			},
			subscribeFail() {
				// alert("调用失败")
				this.temlIds = [];
				this.formSubmit();
			},
			getBtnInfo() {
				let self = this;
				let btnAtrrpx = {
					width: 692,
					height: 88,
					fontSize: 30,
				}
				uni.getSystemInfo({
					success: function(res) {
						let scale = res.screenWidth / 750;
						let newObj = {};
						for (let key in btnAtrrpx) {
							newObj[key] = btnAtrrpx[key] * scale;
						}
						self.btnAtrrpx = newObj;
					},
					fail() {
						self.btnAtrrpx = btnAtrrpx;
					},
				});
			},
			getTemplateId() {
				let self = this;
				self._postBody(
					'index/getSignPackage', {
						url: self.urldata,
						paySource: self.getPlatform(),
					},
					function(res) {
						// self.temlIds = res.data.templateArr;
						self.mpMessage(res.data.signPackage);
					}
				);
			},
			/*获取数据*/
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self.loadding = true;
				self._get('user/agent/cash', {
					platform: self.getPlatform()
				}, function(res) {
					self.words = res.data.words;
					self.agent = res.data.agentUser;
					self.payType = res.data.settlement.payType;
					self.settlement = res.data.settlement;
					self.isData = true;
					self.temlIds = res.data.templateArr;
					if (self.agent && self.agent.realName) {
						self.realName = self.agent.realName;
						self.hasRealName = true;
					}

					self.loadding = false;
					uni.hideLoading();
				});
			},

			/*切换提现方式*/
			TabType(e) {
				this.withdraw_type = e;
			},

			/*判断是否存在*/
			hasType(e) {
				if (this.payType.indexOf(e) != -1) {
					return true;
				} else {
					return false;
				}
			},
			getAll() {
				this.money = this.agent.money;
				this.changeMoney();
			},
			/*申请*/
			formSubmit: function(e) {
				let self = this;
				var formdata = self.form;
				formdata.payType = self.withdraw_type;
				formdata.money = self.money;
				formdata.source = self.getPlatform();
				let callback = function() {
					uni.showLoading({
						title: '正在提交',
						mask: true
					})
					self._postBody('plus/agent/cash/submit', formdata, function(data) {
						uni.hideLoading();
						uni.showToast({
							title: '申请成功',
							duration: 2000,
							icon: 'success'
						});
						uni.navigateBack(-1);
					});
				}
				self.subMessage(self.temlIds, callback);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '/common/css/cash-apply.scss';

	/* 标题 */
	.reg180 {
		padding-right: 20rpx;
		text-align: right;
		transform: rotateY(180deg);
		position: absolute;
		bottom: 0;
	}

	.icon-jiantou {
		color: #333;
		font-size: 30rpx;
	}

	.head_top {
		position: relative;
		height: 30px;
		line-height: 30px;
		color: #333;
		font-size: 32rpx;
	}

	.header .reg180 .icon-you {
		color: #333;
		background: rgba($color: #000000, $alpha: 0.6);
		display: block;
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 50%;
	}

	.top_bg {
		width: 750rpx;
		height: 328rpx;
		background: linear-gradient(180deg, #FEFBED 0%, #EAC6A3 100%);

		.card-top {
			color: #5A3713;

			.top-money {
				font-size: 68rpx;
				font-weight: bold;
				line-height: 1;
				margin-top: 72rpx;
				margin-bottom: 28rpx;
			}
		}
	}



	.txje {
		font-size: 32rpx;

		font-weight: 500;
		color: #333333;

	}

	.apply-cash {
		padding: 0;
		/* padding-top: 16rpx; */
	}

	.form-wrap {}

	.form-item {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
	}

	.form-item .field-name {
		width: 140rpx;
	}

	.form-item input {
		font-size: 28rpx;
	}

	.txbt {
		border-top: 16rpx solid #F2F2F2;

	}

	.form-item .text-price {
		padding: 0 10rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		border: 1px solid #CCCCCC;
	}

	.agreement-content {
		max-height: 60vh;
		overflow-y: auto;
	}

	.iconfont.icon-xuanze {
		font-size: 30rpx;
	}

	.form-item .active .iconfont.icon-xuanze {
		color: #FF5649;
	}

	.apply-cash .btn-sub {
		width: 692rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		background: linear-gradient(0deg, #FFDCA2 0%, #FDC57A 100%);
		border: none;
		font-size: 30rpx;
		color: #5A3713;
		box-sizing: border-box;
		padding: 0;
	}

	.withd-b {
		background-color: #FFFFFF;
		margin-bottom: 97rpx;
	}

	.withd-bct {
		height: 92rpx;
		padding-top: 59rpx;
		padding-right: 49rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.tx-inpt {
		background-color: #FFFFFF;
		font-size: 48rpx;
		line-height: 92rpx;
	}

	.withd-bcb {
		font-size: 26rpx;
		color: #999999;
		padding: 27rpx 0 49rpx 0;
	}

	.withdrawal-btn {
		margin: 0 30rpx;
		background-color: #f36a24;
		height: 60rpx;
		line-height: 60rpx;
		color: #FFFFFF;
		text-align: center;
		border-radius: 30rpx;
		padding: 0;
		font-size: 24rpx;
	}

	.border-tb {
		border: none;
		border-top: 1px solid #eeeeee;
		border-bottom: 1px solid #eeeeee;
	}

	.card-form {
		width: 702rpx;
		background: #FFFFFF;
		margin: 0 auto;
		margin-top: -94rpx;
		border-radius: 25rpx;

		.cart-nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// background-color: rgba(#EEE1C5, 0.2);
			background: #FCF9F4;
			border-radius: 25rpx 25rpx 0 0;

			.cart-nav-item {
				position: relative;
				flex: 1;
				line-height: 92rpx;
				height: 92rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.name {
					position: relative;
					z-index: 2;
				}

				.navactive-bg {
					display: none;
					position: absolute;
					z-index: 1;
					width: 100%;
					height: 102rpx;
					border-radius: 25rpx 25rpx 0 0;
					background-color: #fff;
					left: 0;
					bottom: 0;
				}
			}

			.cart-nav-item.active {
				color: #333;

				.navactive-bg {
					display: block;
				}
			}

			.cart-nav-item.active {
				.navactive-bg-left {
					position: absolute;
					left: -20rpx;
					top: 0;
					width: 38rpx;
					height: 102rpx;
					display: block;
					z-index: 1;
				}

				.navactive-bg-right {
					position: absolute;
					right: -20rpx;
					top: 0;
					width: 38rpx;
					height: 102rpx;
					display: block;
					z-index: 1;
				}
			}
		}

		.cash-wrap {
			margin-bottom: 24rpx;
			padding-bottom: 28rpx;
			padding-top: 10rpx;

			.cash-label {
				font-size: 26rpx;
				width: 150rpx;
				word-break: break-all;
			}

			.cash-form-item {
				flex: 1;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 24rpx;
			}
		}

		.form-bottom-words {
			line-height: 2;
			font-size: 24rpx;
			color: #999;
		}
	}
</style>